<template>
  <div class="time-progress">
    <canvas id="timeProgress" style="width: 365px; height: 150px;"/>
  </div>
</template>
<script>
import F2 from "@antv/f2";
export default {
  name: "time-progress",
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const self = this;

      const data = [
        {
          x: "分类一",
          y: ["2018-04-01", "2018-05-01"],
        },
        {
          x: "分类二",
          y: ["2018-05-01", "2018-06-01"],
        },
        {
          x: "分类三",
          y: ["2018-06-01", "2018-07-01"],
        },
        {
          x: "分类四",
          y: ["2018-07-01", "2018-08-01"],
        },
        {
          x: "分类五",
          y: ["2018-08-01", "2018-09-01"],
        },
        {
          x: "分类六",
          y: ["2018-09-01", "2018-10-01"],
        },
        {
          x: "分类七",
          y: ["2018-10-01", "2018-11-01"],
        },
        {
          x: "分类八",
          y: ["2018-11-01", "2018-12-01"],
        },
      ];
      const chart = new F2.Chart({
        id: "timeProgress",
        pixelRatio: window.devicePixelRatio,
        padding: [ 22, 10, 20, 40 ]
      });
      chart.source(data, {
        y: {
          tickCount: 5,
        },
      });
      chart.coord({
        transposed: true,
      });
      chart.tooltip({
        showItemMarker: true,
        triggerOn: 'click',
        triggerOff: 'touchmove',
        onShow: function onShow(ev) {
          const items = ev.items;
          console.log("items",items)
          items[0].name = items[0].origin.x;
          const value = items[0].origin.y;
          items[0].value = value[0] + " 至 " + value[1];
        },
      });
      chart
        .interval()
        .position("x*y")
        .animate({
          appear: {
            animation: "shapesScaleInY",
          },
        });
      chart.render();
      return;

      // var data = [
      //   {
      //     task: "前期工程",
      //     startTime: "2018-04-18",
      //     endTime: "2018-05-18",
      //     status: 0,
      //   },
      //   {
      //     task: "主体工程",
      //     startTime: "2018-05-15",
      //     endTime: "2018-06-22",
      //     status: 0,
      //   },
      //   {
      //     task: "安装工程",
      //     startTime: "2018-06-28",
      //     endTime: "2018-07-22",
      //     status: 0,
      //   }
      // ];

      // // var values = ['运行成功', '运行失败'];
      // data.forEach(function (obj) {
      //   obj.range = [obj.startTime, obj.endTime];
      //   // obj.status = values[obj.status];
      // });

      // var chart = new G2.Chart({
      //   container: self.$refs.timeProgress,
      //   forceFit: true,
      //   height: 500,
      // });
      // chart.source(data);
      // chart.coord().transpose().scale(1, -1);
      // chart.interval().position("task*range");
      // chart.render();
    },
  },
};
</script>
<style lang="scss">
</style>